<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <div style="display: flex; align-items: center; margin: 20px 0">
      <div style="width: 100px; color: white">用户名</div>
      <input v-model="form.username" type="text" />
    </div>
    <div style="display: flex; align-items: center; margin-bottom: 20px">
      <div style="width: 100px; color: white">密码</div>
      <input v-model="form.password" type="text" />
    </div>
    <button @click="addNewUser" style="background: #3f8cff; color: white">
      确认添加
    </button>
  </div>
</template>

<script>
import eventBus from "../util/myEventBus";
import request from "../axios/request";
export default {
  data() {
    return {
      form: {
        username: null,
        password: null,
      },
    };
  },
  mounted() {
    eventBus.$on("addNewUser", this.addNewUser);
    console.log("绑定事件成功");
  },
  beforeDestroy() {
    eventBus.$off("addNewUser");
  },
  methods: {
    async addNewUser() {
      this.$store.state.lastMethod = "addNewUser";
      this.$store.state.lastData = null;
      await request({
        url: "/user/api/addNewUser",
        method: "POST",
        data: this.form,
      });
    },
  },
};
</script>

<style scoped></style>